<template>
  <div class="gouzo">
    <div class="gouzong">
      <div class="he">
      <div class="hehe">
        <div style="width:1495px;height: 30px;padding-top: 10px">
          <span>小米商城</span><span>MUI</span><span>云服务</span><span>协议规则</span>
        <span style="margin-left: 1100px;" @click="dl">登录</span>
        </div>
        <div style="width:100px;height: 50px;margin-left: 1500px;margin-top: -40px;;">
          <el-button style="width:100px;height: 50px;" class="el-icon-shopping-cart-2" type="warning" @click="cha">购物车</el-button>
        </div>
      </div>
    </div>
    <div class="sjj">
      <el-row>
        <p></p>
        <br />
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="sjjll" @click="hh">
            <p class="el-icon-s-home"></p>
          </div>
        </el-col>
        <el-col :span="2">
          <p>小米手机</p>
        </el-col>
        <el-col :span="2">
          <p>RedMi红米</p>
        </el-col>
        <el-col :span="2">
          <p>电视</p>
        </el-col>
        <el-col :span="4" class="sjjcha">
          <el-input placeholder="请输入内容">
            <template slot="append">
              <el-button
                type="primary"
                icon="el-icon-search"
              ></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
      <div class="gouz">
        <div class="gouzuo">
          <img :src="fanDatas.GImg" width="100%" height="100%" />
        </div>
        <div class="gouyou">
          <div>
            <h3>{{ fanDatas.GName }}</h3>
            <p>{{ fanDatas.GRemark }}</p>
            <p style="color: orange">小米自营</p>
            <p style="color: orange">{{ fanDatas.GPrice }}元</p>
          </div>
          <div class="goudi">
            <p>{{ fanDatas.PName }}{{ fanDatas.CName }}{{ fanDatas.TName }}</p>
            <p style="color: orange">有现货</p>
          </div>
          <div>
            <h4>选择版本</h4>
            <el-radio-group v-model="fanDatas.GBan">
              <el-radio-button label="0">6GB+64GB全网通</el-radio-button>
              <el-radio-button label="1">4GB+64GB移动4G</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <h4>选择颜色</h4>
            <el-radio-group v-model="fanDatas.GColor">
              <el-radio-button label="0">深灰色</el-radio-button>
              <el-radio-button label="1">银白色</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <h4>选择数量</h4>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              label="描述文字"
            ></el-input-number>
          </div>
          <div class="gouji">
            <p>
              <span>{{ fanDatas.GName }}</span>
              <span>{{
                fanDatas.GBan == 0 ? "6GB+64GB全网通" : "4GB+64GB移动4G"
              }}</span>
              <span>{{ fanDatas.GColor == 0 ? "深灰色" : "银白色" }}</span
              ><span>{{ fanDatas.GPrice }}元</span>
            </p>
            <p>总计：{{ fanDatas.GPrice*num }}</p>
          </div>
          <div>
            <el-button type="warning" @click="jia">加入购物车</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fanDatas: {
        GId: "",
        GName: "",
        GBan: "",
        GColor: "",
        GImg: "",
        GNum: "",
        GPrice: "",
        GRemark: "",
        AId: "",
        PId: "",
        CId: "",
        TId: "",
        AddressName: "",
        AName: "",
        Phone: "",
        Remark: "",
        You: "",
      },
      // fanData: [],
      // showData: [],
      addData: {
        GId: "",
        UId: "",
        SNum:0,
      },
      num: 1,
    };
  },
  methods: {
    // fan() {
    //   this.$axios
    //     .get(
    //       "http://localhost:20338/api/XiaoMi/Fan?id=" + this.$route.params.id
    //     )
    //     .then((res) => {
    //       this.fanData = res.data;
    //     });
    // },
    jia() {
      let userid = sessionStorage.getItem("userid");
      if (userid != null) {
      this.addData.GId = this.fanDatas.GId;
      this.addData.UId = userid;
      this.addData.SNum = this.num;
        this.$axios
          .post("http://localhost:20338/api/XiaoMi/Add", this.addData)
          .then((res) => {
            if (res.data > 0) {
              this.$message.success("添加成功");
            } else {
              this.$message.error("添加失败");
            }
          });
      } else {
        this.$router.push("/login");
      }
    },
    handleChange(value) {
      if (value > this.fanDatas.GNum) {
        this.num = this.fanDatas.GNum;
      }
    },
    
    cha() {
      this.$router.push("/car");
    },
    hh() {
      this.$router.push("/");
    },
    dl(){
      this.$router.push("/login");
    }
  },
  created() {
    //this.fan();
    this.fanDatas = this.$route.query;
  },
};
</script>

<style scoped>
.hehecar{
  width: 80px;
  height: 50px;
  background-color: orange;
  
}
.hehe {
  width: 1600px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.he {
  width: 100%;
  height: 50px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.sjjll {
  width: 50px;
  height: 50px;
  background-color: orange;
  
}
.sjjcha {
  margin-left: 650px;
}
.sjj {
  width: 1600px;
  margin: auto;
  height: 100px;
  background-color: #fff;
}
.gouzo {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.gouzong {
  width: 1600px;
  height: 1000px;
  margin: auto;
  background-color: #fff;
}
.gouz {
  width: 1240px;
  height: 800px;
  margin: auto;
  margin-top: 150px;
}
.gouzuo {
  width: 620px;
  height: 800px;
  float: left;
}
.gouyou {
  width: 550px;
  height: 800px;
  margin-left: 690px;
  text-align: left;
}
.gouji {
  background-color: aquamarine;
  height: 100px;
}
.goudi {
  background-color: rgb(185, 185, 185);
  height: 100px;
}
</style>